<!--
 * @Description: 
 * @version: 
 * @Author: 尹鹏孝
 * @Date: 2022-01-11 11:07:47
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2022-01-12 15:13:07
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扁平树变数组</title>
</head>

<body>
    <script>
        const arr = [
            { id: '01', name: '张大大', pid: '', job: '项目经理' },
            { id: '02', name: '小亮', pid: '01', job: '产品leader' },
            { id: '03', name: '小美', pid: '01', job: 'UIleader' },
            { id: '04', name: '老马', pid: '01', job: '技术leader' },
            { id: '05', name: '老王', pid: '01', job: '测试leader' },
            { id: '06', name: '老李', pid: '01', job: '运维leader' },
            { id: '07', name: '小丽', pid: '02', job: '产品经理' },
            { id: '08', name: '大光', pid: '02', job: '产品经理' },
            { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
            { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
            { id: '11', name: '小华', pid: '04', job: '后端工程师' },
            { id: '12', name: '小李', pid: '04', job: '后端工程师' },
            { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
            { id: '14', name: '小强', pid: '05', job: '测试工程师' },
            { id: '15', name: '小涛', pid: '06', job: '运维工程师' },
            { id: '16', name: '小涛', pid: '06', job: '运维工程师' },
            { id: '17', name: '小涛', pid: '06', job: '运维工程师' },
            { id: '18', name: 'aaa小涛', pid: '10', job: '运维工程师' },
            { id: '19', name: '小sss涛', pid: '10', job: '运维工程师' },
            { id: '44', name: '55555', pid: '19', job: '运维工程师' },
            { id: '45', name: '55555', pid: '44', job: '运维工程师' },
            { id: '46', name: '888', pid: '45', job: '运维工程师' },
            { id: '47', name: '888', pid: '46', job: '运维工程师' },
            { id: '48', name: '888', pid: '47', job: '运维工程师' }
        ]

        let me = [];

        for (let i = 1; i <= 10; i++) {
            let obj = {
                id: i,
                name: `${i}-name`,
                pid: i - 1 == 0 ? '' : i - 1
            }
            me.push(obj)
        }
        console.log(me);
        // 要求输出树结构
        /**
         * 
         * 
         * 这个思路可能有一些绕，为什么我改变的sourceMap，但是为什么我console出来menuTree会出来我想要的结果呢，其实就是我们在forEach的时候改变了原数组，所有改变的element都是同一个，在else里修改sourceMap的元素的值的时候，对应的menuMap的那个element也就变了。还有一个小点：sourceMap创建的时候是根据element的id进行创建的，但是else后边给children添加元素是根据pid,也就是意味着当pid=== id的时候才给children添加元素。*/
        var arrToTree = function (arr, children = 'children') {
            arr = JSON.parse(JSON.stringify(arr));
            let result = [];
            if (Array.isArray(arr) && arr.length) {
                let obj = {};
                arr.forEach(element => {
                    obj[element.id] = element;
                    element[children] = [];
                    if (element.pid == '') {
                        result.push(element)
                    } else {
                        obj[element.pid][children].push(element)
                    }
                })
            }
            return result;
        }

        function cutTree(data, childName = 'children') {
            data = JSON.parse(JSON.stringify(data));
            let result = [];
            if (Array.isArray(arr) && arr.length) {
                while (data.length != 0) {
                    let shift = data.shift();
                    let children = shift[childName]
                    delete shift[childName]
                    result.push(shift);
                    if (children) {
                        children.forEach(item => {
                            data.push(item)
                        })
                    }
                }
            }

            return result
        }

        let start = Date.now();
        let treeData = arrToTree(me)
        console.log(treeData);
        let end = Date.now();
        console.log(end - start);

        let s = Date.now();
        let plat = cutTree(treeData);
        console.log(plat);
        let e = Date.now();
        console.log(e - s);


    </script>

</body>

</html>